<template>
  <div ref="scrollContainer" class="track-scroller" @click="onTrackClick">
    <div class="arrow left">
      <svg width="12" height="12">
        <polygon points="2,6 8,2 8,10" style="fill: #1c1c1c" />
      </svg>
    </div>
    <div
      class="thumb"
      :style="`left: ${left}px;width:${width}px`"
      @mousedown="onMouseDown($event, 'middle')"
    >
      <div class="handle left" @mousedown="onMouseDown($event, 'left')"></div>
      <div class="handle right" @mousedown="onMouseDown($event, 'right')"></div>
    </div>
    <div class="arrow right">
      <svg width="12" height="12">
        <polygon points="4,2 4,10 10,6" style="fill: #1c1c1c" />
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, watch } from 'vue';
import { throttle } from 'quasar';
const props = defineProps({
  position: {
    type: Number,
    required: true,
  },
  duration: {
    type: Number,
    required: true,
  },
  zoom: {
    type: Number,
    required: true,
  },
});
const emit = defineEmits(['update:position', 'update:zoom']);
const left = ref(0);
const width = ref(0);
const scrollContainer = ref<InstanceType<typeof HTMLDivElement>>();
let dragging = false;
let currentType = '';
let newPosition = 0;
let newZoom = 0;
function onResize() {
  newZoom = scrollContainer.value!.clientWidth / width.value;
  if (newZoom >= 30) {
    width.value = scrollContainer.value!.clientWidth / 30;
  }
  newPosition = left.value * newZoom;
  fixedEmits();
  update();
}
onMounted(() => {
  update();
  window.addEventListener('resize', onResize);
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize);
});
function fireEmits() {
  emit('update:zoom', newZoom);
  emit('update:position', newPosition);
}
const fixedEmits = throttle(fireEmits, 1);
function onMouseDown(e: MouseEvent, type = 'middle') {
  e.stopPropagation();
  currentType = type;
  dragging = true;

  window.addEventListener('mouseup', onMouseUp);
  window.addEventListener('mousemove', onMouseMove);
}
function onMouseMove(e: MouseEvent) {
  // only emit event in this scope
  if (currentType === 'middle') {
    left.value += e.movementX;
    if (left.value < 0) {
      left.value = 0;
    }
    if (left.value + width.value > scrollContainer.value!.clientWidth) {
      left.value = scrollContainer.value!.clientWidth - width.value;
    }
  } else if (currentType === 'left') {
    left.value += e.movementX;
    if (left.value < 0) {
      left.value = 0;
      return;
    }
    width.value -= e.movementX;
    if (left.value + width.value > scrollContainer.value!.clientWidth) {
      width.value = scrollContainer.value!.clientWidth - left.value;
    }
  } else {
    width.value += e.movementX;
    if (left.value + width.value > scrollContainer.value!.clientWidth) {
      width.value = scrollContainer.value!.clientWidth - left.value;
    }
  }
  newZoom = scrollContainer.value!.clientWidth / width.value;
  if (newZoom >= 30) {
    width.value = scrollContainer.value!.clientWidth / 30;
  }
  newPosition = left.value * newZoom;
  // fixedEmits();
  fireEmits();
}

function onMouseUp(e: MouseEvent) {
  dragging = false;
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
}
function update() {
  if (scrollContainer.value) {
    width.value = (scrollContainer.value.clientWidth / props.zoom) | 1;
    left.value = (props.position / props.zoom) | 1;
  }
}
function onTrackClick(e: MouseEvent) {
  console.log(e);
  if (scrollContainer.value) {
  }
}
watch(
  () => props.zoom,
  () => {
    if (dragging) {
      return;
    }
    update();
  }
);
watch(
  () => props.position,
  () => {
    if (dragging) {
      return;
    }
    update();
  }
);
defineExpose([update]);
</script>
<style lang="scss" scoped>
.track-scroller {
  width: 100%;
  height: 12px;
  background-color: #000;
  position: relative;
  .thumb {
    position: absolute;
    height: 100%;
    background-color: $sub;
    cursor: grab;
  }
  .handle {
    position: absolute;
    background-color: transparent;
    width: 4px;
    height: 100%;
    cursor: e-resize;
    &.left {
      left: 0px;
    }
    &.right {
      right: 0px;
    }
  }
  .arrow {
    position: absolute;
    background-color: #5b5b5b;
    width: 12px;
    height: 12px;
    &.left {
      left: -12px;
    }
    &.right {
      right: -12px;
    }
    svg {
      position: absolute;
    }
  }
}
</style>
